<template>
  <div class="container">
    <h1>新建巡更任务</h1>
    <hr style="border: 1px solid rgb(240, 240, 240)" />
    <span>基础信息</span>
    <div class="body">
      <div class="input">
        <div class="input-left">
          <span>任务名称</span>
        </div>
        <div class="input-right">
          <el-input v-model="task_name" placeholder="请输入" />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>巡更人员</span>
        </div>
        <div class="input-right">
          <el-input v-model="patrol_person" placeholder="请输入" />
          <!-- <el-button plain @click="dialogVisible = true">
            请选择
            <el-icon style="margin-left: 213px">
              <Search />
            </el-icon>
          </el-button>
          <el-dialog
            v-model="dialogVisible"
            title="选择员工"
            width="80%"
            style="min-width: 800px"
          >
            <div
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <div>
                <span style="width: auto; text-align: left">员工姓名</span>
                <el-input
                  v-model="employee_name"
                  style="width: 200px"
                  placeholder="请输入"
                />
              </div>
              <div style="margin-right: 2rem">
                <el-button type="primary" @click="getEmployee">查询</el-button>
                <el-button type="default" @click="reset">重置</el-button>
              </div>
            </div>
            <el-table
              ref="selectedRow"
              :data="employeeData"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" />
              <el-table-column property="id" label="序号" />
              <el-table-column property="employeeName" label="姓名" />
              <el-table-column property="employeeCharacter" label="角色" />
              <el-table-column property="account" label="登录账号" />
              <el-table-column property="employeeStatus" label="员工状态" />
            </el-table>
            <template #footer>
              <div class="dialog-footer">
                <el-pagination
                  v-model:current-page="pageNum"
                  v-model:page-size="pageSize"
                  :page-sizes="[5, 10, 20]"
                  style="margin-bottom: 2rem; justify-content: center"
                  background="true"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="selectEmployee">
                  确认
                </el-button>
              </div>
            </template>
          </el-dialog> -->
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>巡更时间</span>
        </div>
        <div class="input-right">
          <el-date-picker
            v-model="patrol_time"
            type="datetimerange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            date-format="YYYY/MM/DD ddd"
            time-format="A hh:mm:ss"
          />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>提醒时间</span>
        </div>
        <div class="input-right">
          <el-select v-model="remind_time" placeholder="请选择">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>巡更设置</span>
        </div>
        <div class="input-right">
          <el-checkbox v-model="must_photo">必须拍照</el-checkbox>
          <el-checkbox v-model="allow_trips">允许跳检</el-checkbox>
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>关联计划</span>
        </div>
        <div class="input-right">
          <el-select v-model="connection_plan" placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>状态</span>
        </div>
        <div class="input-right">
          <el-select v-model="task_status" placeholder="请选择">
            <el-option
              v-for="item in options3"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <div style="margin: 2rem 0 2rem 12rem">
        <el-button type="primary" @click="addOrUpdate">提交</el-button>
        <el-button type="default" @click="to('patrol/task')">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Search } from "@element-plus/icons-vue";
import { onMounted, ref } from "vue";
import to from "@/utils/to.js";
import axios from "axios";
import dayjs from "dayjs";
import { ElMessage } from "element-plus";
import { useRoute } from "vue-router";

const route = useRoute();
const id = route.query.id;

const dialogVisible = ref(false);

const task_name = ref("");
const patrol_person = ref("");
const patrol_time = ref([]);
const remind_time = ref("");
const must_photo = ref(false);
const allow_trips = ref(false);
const connection_plan = ref("");
const task_status = ref("");

const employee_name = ref("");
const pageNum = ref(1);
const pageSize = ref(5);
const total = ref(0);
const employeeData = ref([]);

const options1 = [
  {
    value: "任务开始前10分钟",
    label: "任务开始前10分钟",
  },
  {
    value: "任务开始前15分钟",
    label: "任务开始前15分钟",
  },
  {
    value: "任务开始前30分钟",
    label: "任务开始前30分钟",
  },
];

const options2 = ref([]);

const options3 = [
  {
    value: "待执行",
    label: "待执行",
  },
  {
    value: "执行中",
    label: "执行中",
  },
  {
    value: "按时完成",
    label: "按时完成",
  },
  {
    value: "超时完成",
    label: "超时完成",
  },
  {
    value: "超时未完成",
    label: "超时未完成",
  },
];

const addOrUpdate = () => {
  let config = {};

  if (task_name.value === "") {
    ElMessage({
      message: "请输入任务名称",
      type: "warning",
    });
    return;
  } else if (patrol_person.value === "") {
    ElMessage({
      message: "请选择巡更人员",
      type: "warning",
    });
    return;
  } else if (patrol_time.value === null) {
    ElMessage({
      message: "请选择巡更时间",
      type: "warning",
    });
    return;
  } else if (connection_plan.value === "") {
    ElMessage({
      message: "请选择关联计划",
      type: "warning",
    });
    return;
  } else if (task_status.value === "") {
    ElMessage({
      message: "请选择计划状态",
      type: "warning",
    });
    return;
  }

  if (id === undefined || id === "") {
    config = {
      url: "http://localhost:8080/patrolTask/addPatrolTask",
      method: "POST",
      headers: {
        Authorization: localStorage.getItem("token"),
      },
      data: {
        taskName: task_name.value,
        patrolPerson: patrol_person.value,
        startTime: dayjs(patrol_time.value[0]).format("YYYY-MM-DD HH:mm:ss"),
        endTime: dayjs(patrol_time.value[1]).format("YYYY-MM-DD HH:mm:ss"),
        remindTime: remind_time.value,
        mustPhoto: must_photo.value,
        allowTrips: allow_trips.value,
        connectionPlan: connection_plan.value,
        taskStatus: task_status.value,
      },
    };
  } else {
    config = {
      url: "http://localhost:8080/patrolTask/updateById",
      method: "PUT",
      headers: {
        Authorization: localStorage.getItem("token"),
      },
      data: {
        id: id,
        taskName: task_name.value,
        patrolPerson: patrol_person.value,
        startTime: dayjs(patrol_time.value[0]).format("YYYY-MM-DD HH:mm:ss"),
        endTime: dayjs(patrol_time.value[1]).format("YYYY-MM-DD HH:mm:ss"),
        remindTime: remind_time.value,
        mustPhoto: must_photo.value,
        allowTrips: allow_trips.value,
        connectionPlan: connection_plan.value,
        taskStatus: task_status.value,
      },
    };
  }

  const response = axios(config);
  response
    .then((data) => {
      if (data.data.code === 1) {
        ElMessage({
          message: data.data.msg,
          type: "success",
        });
        setTimeout(() => {
          to('patrol/task')
        }, 2000);
      } else {
        ElMessage({
          message: data.data.msg,
          type: "warning",
        });
      }
    })
    .catch((error) => {
      console.log(error);
    });
};

const get = () => {
  const config = {
    url: "http://localhost:8080/patrolTask/selectById",
    method: "GET",
    headers: {
      Authorization: localStorage.getItem("token"),
    },
    params: {
      id: id,
    },
  };

  const response = axios(config);
  response
    .then((data) => {
      task_name.value = data.data.data.taskName;
      patrol_person.value = data.data.data.patrolPerson;
      patrol_time.value[0] = data.data.data.startTime;
      patrol_time.value[1] = data.data.data.endTime;
      remind_time.value = data.data.data.remindTime;
      must_photo.value = data.data.data.mustPhoto;
      allow_trips.value = data.data.data.allowTrips;
      connection_plan.value = data.data.data.connectionPlan;
      task_status.value = data.data.data.taskStatus;
    })
    .catch((error) => {
      console.log(error);
    });
};

const getPlan = () => {
  const config = {
    url: "http://localhost:8080/patrolPlan/getAll",
    method: "GET",
    headers: {
      Authorization: localStorage.getItem("token"),
    },
  };

  const response = axios(config);
  response
    .then((data) => {
      options2.value = data.data.data.map((item) => ({
        value: item.planName,
        label: item.planName,
      }));
    })
    .catch((error) => {
      console.log(error);
    });
};

onMounted(() => {
  get();
  getPlan();
  getEmployee();
});

const reset = () => {
  employee_name.value = "";
  getEmployee();
};

const getEmployee = () => {
  const config = {
    url: "http://localhost:8080/employee/pageQuery",
    method: "POST",
    headers: {
      Authorization: localStorage.getItem("token"),
    },
    data: {
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      employeeName: employee_name.value,
    },
  };

  const response = axios(config);
  response
    .then((data) => {
      total.value = data.data.data.total;
      employeeData.value = data.data.data.records;
    })
    .catch((error) => {
      console.log(error);
    });
};
</script>

<style scoped>
.container {
  background-color: white;
  height: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

h1 {
  font-size: 2rem;
  font-weight: 600;
  padding: 2rem 0 10px 4rem;
}

span {
  display: inline-block;
  font-size: 15px;
  margin: 1rem 2rem 1rem 0;
  line-height: 24px;
  width: 100px;
  text-align: right;
}

.body {
  display: grid;
  justify-content: center;
  align-items: center;
}

.input {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
}

.input-right {
  width: 300px;
}
</style>
